<!-- 备注属性设置 -->
<template>
  <div>
    <Form :model="formData" :rules="ruleValidate" ref="form" :label-width="100">
      <Row :gutter="32">
        <Col span="20">
          <Form-item prop="require" :label="'是否显示'">
            <RadioGroup v-model="formData.isShow">
              <Radio :label="1">是</Radio>
              <Radio :label="0">否</Radio>
            </RadioGroup>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" v-if="formData.isShow === 1">
        <Col span="20">
          <Form-item prop="field" :label="'字段类型'">
            <Select placeholder="请选择" disabled v-model="formData.type">
              <Option :value="0">单行文本</Option>
            </Select>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="12" class="code-row-bg" v-if="formData.isShow === 1">
        <Col span="18">
          <Form-item label="最大长度：" :label-width="180">
            <InputNumber v-model="formData.maxlength" min="0"></InputNumber>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg" v-if="formData.isShow === 1">
        <Col span="20">
          <Form-item label="是否必填" prop="require" :label-width="100">
            <RadioGroup v-model="formData.require">
              <Radio :label="1">必填</Radio>
              <Radio :label="0">非必填</Radio>
            </RadioGroup>
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        isShow: 1,
        type: 0,
        maxlength: 300,
        require: 0
      },
      ruleValidate: {
        field: [{ required: true, message: '请选择字段类型', trigger: 'blur' }],
        require: [{ required: true, message: '请选择是否必填', trigger: 'blur' }]
      }
    }
  },
  props: {
    attributes: {
      type: Object,
      default: () => {}
    }
  },
  created() {
    if (Object.keys(this.attributes).length) {
      this.formData = this.attributes
    }
    this.$emit('SetTitle', '备注设置')
    this.$emit('SetPageActions', [
      {
        text: '确定',
        theme: 'primary',
        handle: () => {
          this.$emit('Close', this.formData)
        }
      },
      {
        text: '取消',
        handle: () => {
          this.$emit('Close')
        }
      }
    ])
    this.$emit('SetPageMinHeight', 100)
  }
}
</script>

<style lang="scss" scoped></style>
